<template>
<view class="page">
<!-- 顶部导航栏 -->
<view class="nav-bar">
<uni-icons type="left" size="24" color="#333" @click="goBack"></uni-icons>
<text class="nav-title">商品库存</text>
<uni-icons type="search" size="24" color="#333" @click="openSearch"></uni-icons>
</view>
<!-- 商品信息区域 -->
<view class="product-info">
<image class="product-image" :src="productImage" mode="aspectFill"></image>
<view class="product-details">
<text class="product-name">{{ productName }}</text>
<text class="product-id">商品编号: {{ productId }}</text>
<text class="product-spec">规格型号: {{ productSpec }}</text>
<text class="total-stock">总库存: {{ totalStock }}</text>
</view>
</view>
<!-- 仓库库存列表 -->
<scroll-view scroll-y="true" class="warehouse-list">
<view v-for="(warehouse, index) in warehouses" :key="index" class="warehouse-card" :class="getStockStatusClass(warehouse)">
<view class="warehouse-header">
<text class="warehouse-name">{{ warehouse.name }}</text>
<text class="stock-status">{{ getStockStatusText(warehouse) }}</text>
</view>
<text class="stock-quantity">{{ warehouse.stock }}</text>
<text class="warehouse-location">位置: {{ warehouse.location }}</text>
<text class="warehouse-status">状态: {{ warehouse.status }}</text>
<text class="alert-threshold">预警阈值: {{ warehouse.alertThreshold }}</text>
</view>
</scroll-view>
<!-- 底部功能区 -->
<view class="bottom-actions">
<uni-button type="primary" @click="openStockTransferModal">库存调拨</uni-button>
<uni-button type="default" @click="handleStockAlert">库存预警设置</uni-button>
</view>
<!-- 库存调拨弹窗 -->
<uni-popup ref="stockTransferPopup" type="center">
<view class="stock-transfer-modal">
<text class="modal-title">库存调拨</text>
<view class="transfer-form">
<view class="form-item">
<text>调出仓库：</text>
<picker :range="warehouseNames" @change="onFromWarehouseChange">
<view class="picker">{{ fromWarehouse || '请选择调出仓库' }}</view>
</picker>
</view>
<view class="form-item">
<text>调入仓库：</text>
<picker :range="warehouseNames" @change="onToWarehouseChange">
<view class="picker">{{ toWarehouse || '请选择调入仓库' }}</view>
</picker>
</view>
<view class="form-item">
<text>调拨数量：</text>
<input type="number" v-model="transferQuantity" placeholder="请输入调拨数量" />
</view>
</view>
<view class="modal-actions">
<uni-button type="default" @click="closeStockTransferModal">取消</uni-button>
<uni-button type="primary" @click="confirmStockTransfer">确认调拨</uni-button>
</view>
</view>
</uni-popup>

<!-- 库存预警设置弹窗 -->
<uni-popup ref="stockAlertPopup" type="center">
<view class="stock-alert-modal">
<text class="modal-title">库存预警设置</text>
<view class="alert-form">
<view class="form-item">
<text>预警阈值：</text>
<input type="number" v-model="alertThreshold" placeholder="请输入预警阈值" />
</view>
</view>
<view class="modal-actions">
<uni-button type="default" @click="closeStockAlertModal">取消</uni-button>
<uni-button type="primary" @click="confirmStockAlert">确认设置</uni-button>
</view>
</view>
</uni-popup>
</view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
// 模拟数据
const productImage = 'https://ai-public.mastergo.com/ai/img_res/b8a7291c5ab79c412ffea071ec51bd76.jpg';
const productName = ref('智能手机 X1');
const productId = ref('SP20230001');
const productSpec = ref('6.5英寸, 256GB');
const totalStock = ref(1500);
const warehouses = ref([
{ name: '北京仓库', stock: 500, location: '北京市朝阳区', status: '正常运营', alertThreshold: 200 },
{ name: '上海仓库', stock: 300, location: '上海市浦东新区', status: '正常运营', alertThreshold: 200 },
{ name: '广州仓库', stock: 400, location: '广州市天河区', status: '暂停入库', alertThreshold: 200 },
{ name: '深圳仓库', stock: 200, location: '深圳市南山区', status: '正常运营', alertThreshold: 200 },
{ name: '成都仓库', stock: 100, location: '成都市武侯区', status: '正常运营', alertThreshold: 200 },
]);
const warehouseNames = computed(() => warehouses.value.map(w => w.name));
const getStockStatusClass = (warehouse: { stock: number, alertThreshold: number }) => {
if (warehouse.stock > warehouse.alertThreshold * 2) return 'stock-sufficient';
if (warehouse.stock > warehouse.alertThreshold) return 'stock-warning';
return 'stock-low';
};
const getStockStatusText = (warehouse: { stock: number, alertThreshold: number }) => {
if (warehouse.stock > warehouse.alertThreshold * 2) return '库存充足';
if (warehouse.stock > warehouse.alertThreshold) return '库存警戒';
return '库存不足';
};
const goBack = () => {
uni.navigateBack();
};
const openSearch = () => {
// 实现搜索功能
uni.showToast({ title: '搜索功能待实现', icon: 'none' });
};
const handleStockAlert = () => {
stockAlertPopup.value.open();
};

const stockAlertPopup = ref(null);
const alertThreshold = ref('');

const closeStockAlertModal = () => {
stockAlertPopup.value.close();
alertThreshold.value = '';
};

const confirmStockAlert = () => {
if (!alertThreshold.value) {
uni.showToast({ title: '请输入预警阈值', icon: 'none' });
return;
}
const threshold = parseInt(alertThreshold.value);
if (isNaN(threshold) || threshold <= 0) {
uni.showToast({ title: '请输入有效的预警阈值', icon: 'none' });
return;
}
// 更新所有仓库的预警阈值
warehouses.value.forEach(warehouse => {
warehouse.alertThreshold = threshold;
});
uni.showToast({ title: '预警阈值设置成功', icon: 'success' });
closeStockAlertModal();
};
// 库存调拨相关
const stockTransferPopup = ref(null);
const fromWarehouse = ref('');
const toWarehouse = ref('');
const transferQuantity = ref('');
const openStockTransferModal = () => {
stockTransferPopup.value.open();
};
const closeStockTransferModal = () => {
stockTransferPopup.value.close();
resetTransferForm();
};
const onFromWarehouseChange = (e) => {
fromWarehouse.value = warehouseNames.value[e.detail.value];
};
const onToWarehouseChange = (e) => {
toWarehouse.value = warehouseNames.value[e.detail.value];
};
const resetTransferForm = () => {
fromWarehouse.value = '';
toWarehouse.value = '';
transferQuantity.value = '';
};
const confirmStockTransfer = () => {
if (!fromWarehouse.value || !toWarehouse.value || !transferQuantity.value) {
uni.showToast({ title: '请填写完整信息', icon: 'none' });
return;
}
if (fromWarehouse.value === toWarehouse.value) {
uni.showToast({ title: '调出仓库和调入仓库不能相同', icon: 'none' });
return;
}
const quantity = parseInt(transferQuantity.value);
const fromWarehouseIndex = warehouses.value.findIndex(w => w.name === fromWarehouse.value);
const toWarehouseIndex = warehouses.value.findIndex(w => w.name === toWarehouse.value);
if (warehouses.value[fromWarehouseIndex].stock < quantity) {
uni.showToast({ title: '调出仓库库存不足', icon: 'none' });
return;
}
// 执行库存调拨
warehouses.value[fromWarehouseIndex].stock -= quantity;
warehouses.value[toWarehouseIndex].stock += quantity;
uni.showToast({ title: '库存调拨成功', icon: 'success' });
closeStockTransferModal();
};
</script>
<style>
page {
height: 100%;
}
.page {
display: flex;
flex-direction: column;
height: 100%;
background-color: #f5f5f5;
}
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
background-color: #ffffff;
}
.nav-title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.product-info {
display: flex;
padding: 30rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
}
.product-image {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
margin-right: 30rpx;
}
.product-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.product-id, .product-spec, .total-stock {
font-size: 26rpx;
color: #666666;
margin-top: 10rpx;
}
.warehouse-list {
flex: 1;
padding: 0 30rpx;
overflow: auto;
}
.warehouse-card {
background-color: #ffffff;
border-radius: 10rpx;
padding: 30rpx;
margin-bottom: 20rpx;
}
.warehouse-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.warehouse-name {
font-size: 30rpx;
font-weight: bold;
color: #333333;
}
.stock-status {
font-size: 24rpx;
padding: 6rpx 12rpx;
border-radius: 20rpx;
}
.stock-quantity {
font-size: 48rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.warehouse-location, .warehouse-status, .alert-threshold {
font-size: 26rpx;
color: #666666;
margin-top: 10rpx;
}

/* 库存预警设置弹窗样式 */
.stock-alert-modal {
background-color: #ffffff;
border-radius: 20rpx;
padding: 40rpx;
width: 600rpx;
}

.alert-form {
margin-bottom: 40rpx;
}
.stock-sufficient {
border: 2rpx solid #4CAF50;
}
.stock-sufficient .stock-status {
background-color: #E8F5E9;
color: #4CAF50;
}
.stock-sufficient .stock-quantity {
color: #4CAF50;
}
.stock-warning {
border: 2rpx solid #FFC107;
}
.stock-warning .stock-status {
background-color: #FFF8E1;
color: #FFC107;
}
.stock-warning .stock-quantity {
color: #FFC107;
}
.stock-low {
border: 2rpx solid #F44336;
}
.stock-low .stock-status {
background-color: #FFEBEE;
color: #F44336;
}
.stock-low .stock-quantity {
color: #F44336;
}
.bottom-actions {
display: flex;
justify-content: space-between;
padding: 30rpx;
background-color: #ffffff;
}
.bottom-actions .uni-button {
flex: 1;
margin: 0 10rpx;
}
/* 库存调拨弹窗样式 */
.stock-transfer-modal {
background-color: #ffffff;
border-radius: 20rpx;
padding: 40rpx;
width: 600rpx;
}
.modal-title {
font-size: 36rpx;
font-weight: bold;
text-align: center;
margin-bottom: 40rpx;
}
.transfer-form {
margin-bottom: 40rpx;
}
.form-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.form-item text {
font-size: 28rpx;
color: #333;
}
.picker {
border: 1rpx solid #ddd;
padding: 10rpx 20rpx;
border-radius: 10rpx;
font-size: 28rpx;
width: 300rpx;
}
.form-item input {
border: 1rpx solid #ddd;
padding: 10rpx 20rpx;
border-radius: 10rpx;
font-size: 28rpx;
width: 300rpx;
}
.modal-actions {
display: flex;
justify-content: space-between;
}
.modal-actions .uni-button {
flex: 1;
margin: 0 10rpx;
}
</style>
